<html>
 <head>
  <meta charset="utf-8">
  <title>{ms:global.name/}</title>
  <script src="/static/mdiy/index.js"></script>
  <#include "head-file.htm" />
 </head>
 <body>
  <div id="app" v-cloak>
   <#include "header.htm" />
   <div class="ms-banner">
    <swiper class="ms-vue-awesome-swiper" :options="{
slidesPerView : 1,
spaceBetween: 0,
autoplay: {
delay: 1500,
},
navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}
}">
     <div class="swiper-button-prev " slot="button-prev">
     </div>
     <div class="swiper-button-next " slot="button-next">
     </div>
     <!--静态图片-->
     <!--动态图片-->
     {ms:arclist typeid=1329357285870346241 size=3 }
     <swiper-slide>
      <a href="[field.source/]" target="_blank" style="width:100%;height: 100%">
       <div style="background-image: url('{ms:global.host/}/{@ms:file field.litpic/}');background-size: cover; background-position: center; width:100%;height: 100%">
       </div>
      </a>
     </swiper-slide>
     {/ms:arclist}
    </swiper>
   </div>
   <div class="about">
     {ms:arclist typeid='1329259260493766658'}
    <div class="body">
     <div class="left">
      <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
     </div>
     <div class="right">
      <div class="title">
       <span> ${field.title} </span>
      </div>
      <div class="desc">
       <span> ${field.descrip} </span>
      </div>
     </div>
    </div> {/ms:arclist}
   </div>
   <div class="product">
    <div class="title">
     <span> 核心产品 </span>
    </div>
    <div class="body">
      {ms:arclist flag='c' typeid='1329257213283344385'}
     <div class="prod">
      <div class="pic">
       <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
      </div>
      <a href="{ms:global.url/}${field.link}" class="text"> ${field.title} </a>
     </div> {/ms:arclist}
    </div>
    <a href="{ms:global.url/}/product/index.html" class="more"> 更多产品 </a>
   </div>
   <div class="news">
    <div class="title">
     <span> 新闻动态 </span>
    </div>
    <div class="body">
      {ms:arclist flag='c' typeid='1329257282518720513'}
     <div class="left">
      <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
      <a href="{ms:global.url/}${field.link}" target="_blank" class="title"> ${field.title} </a>
      <span class="desc"> ${field.descrip} </span>
     </div> {/ms:arclist}
     <div class="right">
       {ms:arclist size=3 typeid='1329257282518720513'}
      <div class="news-item">
       <div class="date">
        <span class="day"> ${field.date?date?string("dd")} </span>
        <span class="date"> ${field.date?date?string("yyyy-MM")} </span>
       </div>
       <div class="news-body">
        <a href="{ms:global.url/}${field.link}" class="title"> ${field.title} </a>
        <span class="desc"> ${field.descrip} </span>
       </div>
      </div> {/ms:arclist}
     </div>
    </div>
    <div class="more">
    </div>
    <a href="{ms:global.url/}/news/index.html" class="more"> 更多新闻 </a>
   </div>
   <#include "footer.htm" />
  </div>
  <script>
var app = new Vue({
    el: '#app',
    watch:{
    },
    data:function() {
     return {
      loading:false,
      saveDisabled: false,
      verifCode: ms.base + "/code",
      //表单数据
      form: {
       // 姓名
       leaveName:'',
       // 电话
       leavePhone:'',
       // 留言内容
       textareaMsg:''
      },
      rules:{
       rand_code: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'blur'
       }, {
         min: 4,
         max: 4,
         message: '请输入4位验证码',
         trigger: 'blur'
        }]
      },
     }
    },
    methods: {
       switchShow:function(arr){
       var that = this
           arr.forEach(function(x){
              let e = that.$el.querySelector("#key_"+x)
               if(e){
                   e.style.display=e.style.display=='none'?'flex':'none'
               }
           })
       },
       save: function() {
         var that = this;
         that.saveDisabled = true;
         that.formModel.save(function(res) {
          if (res.result) {
           that.$notify({
            title: '成功',
            type: 'success',
            message: '保存成功!'
           });

          } else {
           that.$notify({
            title: '失败',
            message: res.msg,
            type: 'warning'
           });
          }
          that.saveDisabled = false;
         });
       },
       code: function () {
        this.verifCode = ms.base + "/code?t=" + (new Date).getTime();
       }
    },
    created(){
      var that = this;
      URLS["post"].formURL["save"] = "/mdiy/formData/save.do";
      ms.mdiy.model.post("formModel", { "modelName": "留言版" }).then(function(obj) {
       that.formModel = obj;
      });
    }
})
</script>
  <style>
    body {
        background-color:#fff;
        box-sizing:border-box;
        font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
        moz-box-sizing:border-box;
        webkit-box-sizing:border-box;
    }
    .swiper-button-prev, .swiper-button-next{
     color: #fff;
    }
    .ms-banner
    {
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            width:100%;
            box-sizing:border-box;
            margin-top:0px;
            height:630px;
    }
    .ms-banner .ms-vue-awesome-swiper
    {
            background-color:#E8F4FD;
            align-items:center;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            width:100%;
            box-sizing:border-box;
            position:relative;
            padding-left:0px;
            justify-content:space-between;
            margin-top:0px;
            height:100%;
    }
    .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom
    {
            background-color:rgba(0,0,0,0.5);
            align-items:center;
            flex-direction:row;
            bottom:0px;
            display:flex;
            box-sizing:border-box;
            justify-content:flex-start;
            flex-wrap:nowrap;
            width:100%;
            position:absolute;
            padding-left:10px;
            margin-top:0px;
            height:40px;
    }
    .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom .ms-vue-awesome-swiper-title
    {
            color:#FFFFFF;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:14px;
            padding-left:0px;
    }
    .about
    {
            align-items:center;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            padding-left:0px;
            justify-content:center;
            margin-top:18px;
            height:200px;
    }
    .about .body
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:1200px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:100%;
    }
    .about .body .left
    {
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:40%;
            box-sizing:border-box;
            padding-left:0px;
            height:100%;
    }
    .about .body .left img
    {
            width:100%;
            padding-top:0px;
            padding-left:0px;
            height:100%;
    }
    .about .body .right
    {
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:20px;
            width:100%;
            box-sizing:border-box;
            padding-left:20px;
            margin-top:0px;
            height:100%;
    }
    .about .body .right .title
    {
            align-items:center;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            padding-left:0px;
            margin-top:0px;
            height:40px;
    }
    .about .body .right .title span
    {
            padding-bottom:0px;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:28PX;
            padding-top:0px;
            padding-left:0px;
    }
    .about .body .right .desc
    {
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            padding-left:0px;
            height:100%;
    }
    .about .body .right .desc span
    {
            padding-bottom:0px;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:16PX;
            padding-top:0px;
            margin-top:20px;
     line-height: 32px;

    }
    .product
    {
            background-color:#F2F2F2;
            align-items:center;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:40px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:40px;
            padding-left:0px;
            margin-top:20px;
    }
    .product .title
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:40px;
    }
    .product .title span
    {
            padding-bottom:0px;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:28PX;
            padding-top:0px;
            padding-left:0px;
    }
    .product .body
    {
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:space-between;
            padding-bottom:0px;
            flex-wrap:wrap;
            width:1200px;
            margin-bottom:40px;
            padding-top:0px;
            padding-left:0px;
            margin-top:40px;
            height:100%;
    }
    .product .body .prod
    {
            background-color:#FFFFFF;
            flex-direction:column;
            display:flex;
            padding-right:20px;
            box-sizing:border-box;
            padding-bottom:20px;
            flex-wrap:nowrap;
            width:32%;
            margin-bottom:20px;
            padding-top:20px;
            padding-left:20px;
            margin-top:0px;
            height:100%;
    }
    .product .body .prod .pic
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:200px;
    }
    .product .body .prod .pic img
    {
            padding-bottom:0px;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            margin-top:0px;
            height:100%;
    }
    .product .body .prod .text
    {
            padding-bottom:0px;
            text-align:center;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:16PX;
            padding-top:8px;
            padding-left:0px;
            margin-top:10px;
            height:40px;
    }
    .product .more
    {
            background-color:#FFFFFF;
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100px;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:48px;
    }
    .news
    {
            align-items:center;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:20px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:20px;
            padding-top:20px;
            padding-left:0px;
            margin-top:20px;
    }
    .news .title
    {
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100%;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:40px;
    }
    .news .title span
    {
            padding-bottom:0px;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:28PX;
            padding-top:0px;
            padding-left:0px;
    }
    .news .body
    {
            align-items:flex-start;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:space-between;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:1200px;
            margin-bottom:20px;
            padding-top:0px;
            padding-left:0px;
            margin-top:20px;
            height:100%;
    }
    .news .body .left
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            width:400px;
            box-sizing:border-box;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
    }
    .news .body .left img
    {
            width:100%;
            padding-top:0px;
            height:280px;
    }
    .news .body .left .title
    {
            text-align:left;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            justify-content:flex-start;
            padding-bottom:0px;
            font-size:18PX;
            margin-bottom:0px;
            padding-top:10px;
            padding-left:0px;
            margin-top:0px;
            height:40px;
    }
    .news .body .left .desc
    {
            padding-bottom:0px;
            color:#B5B5B5;
            text-align:left;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:14PX;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
    }
    .news .body .right
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            width:800px;
            margin-bottom:0px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:20px;
            margin-top:0px;
            height:100%;
    }
    .news .body .right .news-item
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            width:100%;
            margin-bottom:10px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:100px;
    }
    .news .body .right .news-item .date
    {
            background-color:#EEEEEE;
            align-items:center;
            flex-direction:column;
            display:flex;
            padding-right:8px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:8px;
            flex-wrap:nowrap;
            width:100px;
            margin-bottom:0px;
            padding-top:8px;
            padding-left:8px;
            height:100%;
    }
    .news .body .right .news-item .date .day
    {
            padding-bottom:0px;
            text-align:center;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:28PX;
            padding-top:14px;
            padding-left:0px;
            height:70%;
    }
    .news .body .right .news-item .date .date
    {
            text-align:center;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            font-size:16PX;
            padding-top:0px;
    }
    .news .body .right .news-item .news-body
    {
            padding-bottom:0px;
            flex-wrap:nowrap;
            flex-direction:column;
            display:flex;
            padding-right:0px;
            width:90%;
            margin-bottom:10px;
            box-sizing:border-box;
            padding-top:0px;
            padding-left:10px;
            margin-top:0px;
            height:100%;
    }
    .news .body .right .news-item .news-body .title
    {
            text-align:left;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            justify-content:flex-start;
            padding-bottom:0px;
            font-size:18PX;
            margin-bottom:0px;
            padding-top:10px;
            padding-left:0px;
            margin-top:0px;
            height:40px;
    }
    .news .body .right .news-item .news-body .desc
    {
            padding-bottom:0px;
            color:#B5B5B5;
            text-align:left;
            flex-direction:row;
            word-wrap:break-word;
            display:inline-block;
            padding-right:0px;
            font-size:14PX;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
    }
    .news .more
    {
            background-color:#FFFFFF;
            align-items:center;
            flex-direction:row;
            display:flex;
            padding-right:0px;
            box-sizing:border-box;
            justify-content:center;
            padding-bottom:0px;
            flex-wrap:nowrap;
            width:100px;
            margin-bottom:0px;
            padding-top:0px;
            padding-left:0px;
            margin-top:0px;
            height:48px;
    }
@media (max-width: 768px){
        .ms-banner
        {
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                width:100%;
                box-sizing:border-box;
                margin-top:0px;
                height:unset;
        }
        .ms-banner .ms-vue-awesome-swiper
        {
                background-color:#E8F4FD;
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                width:100%;
                box-sizing:border-box;
                position:relative;
                padding-left:0px;
                justify-content:space-between;
                margin-top:0px;
                height:300px;
        }
        .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom
        {
                background-color:RGBA(63, 158, 255, .75);
                align-items:center;
                flex-direction:row;
                bottom:0px;
                display:flex;
                box-sizing:border-box;
                justify-content:flex-start;
                flex-wrap:nowrap;
                width:100%;
                position:absolute;
                padding-left:10px;
                margin-top:0px;
                height:40px;
        }
        .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom .ms-vue-awesome-swiper-title
        {
                color:#FFFFFF;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                font-size:14px;
                padding-left:0px;
        }
        .about
        {
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-left:0px;
                justify-content:center;
                margin-top:18px;
                height:100%;
        }
        .about .body
        {
                padding-bottom:0px;
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                width:100%;
                box-sizing:border-box;
                margin-bottom:0px;
                padding-top:0px;
                margin-top:0px;
                justify-content:flex-start;
                height:100%;
        }
        .about .body .left
        {
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:90%;
                box-sizing:border-box;
                margin-bottom:10px;
                padding-left:0px;
                justify-content:center;
        }
        .about .body .left img
        {
                width:100%;
                margin-bottom:0px;
                padding-top:0px;
                height:200px;
        }
        .about .body .right
        {
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:20px;
                width:100%;
                box-sizing:border-box;
                margin-bottom:0px;
                padding-left:20px;
                margin-top:0px;
                height:100%;
        }
        .about .body .right .title
        {
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-left:0px;
                margin-top:0px;
                height:40px;
        }
        .about .body .right .title span
        {
                padding-bottom:0px;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:28PX;
                padding-top:0px;
                padding-left:0px;
        }
        .about .body .right .desc
        {
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-left:0px;
                height:100%;
        }
        .about .body .right .desc span
        {
                padding-bottom:0px;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                font-size:16PX;
                padding-top:0px;
                margin-top:20px;
        }
        .product
        {
                background-color:#F2F2F2;
                align-items:center;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:40px;
                flex-wrap:nowrap;
                width:100%;
                margin-bottom:0px;
                padding-top:40px;
                padding-left:0px;
                margin-top:20px;
                height:unset;
        }
        .product .title
        {
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100%;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:40px;
        }
        .product .title span
        {
                padding-bottom:0px;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:28PX;
                padding-top:0px;
                padding-left:0px;
        }
        .product .body
        {
                padding-bottom:0px;
                align-items:center;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                width:100%;
                box-sizing:border-box;
                margin-bottom:0px;
                padding-top:0px;
                margin-top:0px;
                justify-content:center;
                height:100%;
        }
        .product .body .prod
        {
                background-color:#FFFFFF;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:90%;
                margin-bottom:40px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:100%;
        }
        .product .body .prod .pic
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                width:100%;
                box-sizing:border-box;
                padding-top:0px;
                padding-left:0px;
                height:200px;
        }
        .product .body .prod .pic img
        {
                padding-bottom:0px;
                width:100%;
                padding-top:0px;
                margin-top:0px;
                height:100%;
        }
        .product .body .prod .text
        {
                padding-bottom:0px;
                text-align:center;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:16PX;
                padding-top:8px;
                padding-left:0px;
                margin-top:10px;
                height:40px;
        }
        .product .more
        {
                background-color:#FFFFFF;
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100px;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:48px;
        }
        .news
        {
                align-items:center;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:20px;
                flex-wrap:nowrap;
                width:100%;
                margin-bottom:20px;
                padding-top:20px;
                padding-left:0px;
                margin-top:20px;
                height:unset;
        }
        .news .title
        {
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100%;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:40px;
        }
        .news .title span
        {
                padding-bottom:0px;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:28PX;
                padding-top:0px;
                padding-left:0px;
        }
        .news .body
        {
                align-items:flex-start;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:space-between;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:90%;
                margin-bottom:20px;
                padding-top:0px;
                padding-left:0px;
                margin-top:20px;
                height:100%;
        }
        .news .body .left
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                width:100%;
                box-sizing:border-box;
                margin-bottom:10px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
        }
        .news .body .left img
        {
                padding-bottom:0px;
                width:100%;
                margin-bottom:0px;
                padding-top:0px;
                margin-top:0px;
                height:100%;
        }
        .news .body .left .title
        {
                padding-bottom:0px;
                text-align:left;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:18PX;
                padding-top:10px;
                padding-left:0px;
                margin-top:0px;
                justify-content:flex-start;
                height:40px;
        }
        .news .body .left .desc
        {
                padding-bottom:0px;
                color:#B5B5B5;
                text-align:left;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:14PX;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
        }
        .news .body .right
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:100%;
                margin-bottom:0px;
                box-sizing:border-box;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:100%;
        }
        .news .body .right .news-item
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                width:100%;
                margin-bottom:10px;
                box-sizing:border-box;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:100px;
        }
        .news .body .right .news-item .date
        {
                background-color:#EEEEEE;
                align-items:center;
                flex-direction:column;
                display:flex;
                padding-right:8px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:8px;
                flex-wrap:nowrap;
                width:100px;
                margin-bottom:0px;
                padding-top:8px;
                padding-left:8px;
                height:100%;
        }
        .news .body .right .news-item .date .day
        {
                padding-bottom:0px;
                text-align:center;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                font-size:28PX;
                padding-top:14px;
                padding-left:0px;
                height:70%;
        }
        .news .body .right .news-item .date .date
        {
                text-align:center;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                font-size:16PX;
                padding-top:0px;
        }
        .news .body .right .news-item .news-body
        {
                padding-bottom:0px;
                flex-wrap:nowrap;
                flex-direction:column;
                display:flex;
                padding-right:0px;
                width:90%;
                margin-bottom:10px;
                box-sizing:border-box;
                padding-top:0px;
                padding-left:10px;
                margin-top:0px;
                height:100%;
        }
        .news .body .right .news-item .news-body .title
        {
                text-align:left;
                flex-direction:row;
                word-wrap:break-word;
                display:inline-block;
                padding-right:0px;
                justify-content:flex-start;
                padding-bottom:0px;
                font-size:18PX;
                margin-bottom:0px;
                padding-top:10px;
                padding-left:0px;
                margin-top:0px;
                height:40px;
        }
        .news .body .right .news-item .news-body .desc
        {
         display: none;
                padding-bottom:0px;
                color:#B5B5B5;
                text-align:left;
                flex-direction:row;
                word-wrap:break-word;
                padding-right:0px;
                font-size:14PX;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
        }
        .news .more
        {
                background-color:#FFFFFF;
                align-items:center;
                flex-direction:row;
                display:flex;
                padding-right:0px;
                box-sizing:border-box;
                justify-content:center;
                padding-bottom:0px;
                flex-wrap:nowrap;
                width:100px;
                margin-bottom:0px;
                padding-top:0px;
                padding-left:0px;
                margin-top:0px;
                height:48px;
        }

}</style>
 </body>
</html>
